<template>
  <div class="viewCustomerDetails">
    <div class="header-top">
      <div class="head-title" @click="gotoPage">
        <div class="backIcon"><i class="el-icon-back"></i></div>新建问卷
      </div>
    </div>
    <div class="content-big">
      <div class="content-left">
        <div class="questionType" v-for="(item,index) in questionType" :key="index">
          <div class="questionType-title">{{ item.groupType }}</div>
          <ul>
            <li v-for="(sitem,sindex) in item.groupList" :key="sindex" @click="changeType(sindex+1,sitem.type)"><img :src="sitem.icon"/>{{ sitem.name }}</li>
          </ul>
        </div>
      </div>
      <div class="content-center">
        <draggable :list="questionList"
          dragClass="dragClass"
          ghostClass="ghostClass"
          chosenClass="chosenClass"
          handle=".move"
          @end="onEnd"
        >
          <div class="content-item" :class="index==itemActive?`active`:``" @click="getShow(index)" v-for="(item,index) in questionList">
            <!--        头部-->
            <template v-if="item.type==`head`">
              <div class="header">
                <img src="@/assets/images/default-cover.png" v-if="item.headImg && !item.imgUrl"/>
                <img :src="item.imgUrl" v-if="item.headImg && item.imgUrl">
                <div class="header-title">{{ item.title }}</div>
                <div class="header-tips">{{ item.tips }}</div>
              </div>
            </template>
            <div class="radioList" v-if="item.type==`radio`">
              <div class="title-com">{{ index }}{{ item.title }} <span v-if="item.queType==0" style="color: red; margin-left: 10px">*</span></div>
              <el-radio-group v-model="item.radioValue">
                <el-radio :label="sitem.value" v-for="(sitem,sindex) in item.options">
                  <div class="radio-item">
                    <div class="code"> {{ sitem.label }}</div>
                    <img :src="sitem.imgUrl" v-if="sitem.imgUrl"/>
                  </div>
                </el-radio>
              </el-radio-group>
            </div>
            <!--          下拉单选-->
            <div class="radioList" v-if="item.type==`SelectRadio`">
              <div class="title-com">{{ index }}{{ item.title }} <span v-if="item.queType==0" style="color: red; margin-left: 10px">*</span></div>
              <el-select v-model="item.radioValue" :placeholder="item.placeholder">
                <el-option
                  :value="sitem.value"
                  :label="sitem.label"
                  v-for="(sitem,sindex) in item.options"

                >
                </el-option>
              </el-select>
            </div>
            <div class="radioList" v-if="item.type==`checkbox`">
              <div class="title-com">{{ index }}{{ item.title }} <span v-if="item.queType==0" style="color: red; margin-left: 10px">*</span></div>
              <el-checkbox-group v-model="item.checkboxValue">
                <el-checkbox :label="sitem.value" v-for="(sitem,sindex) in item.options">
                  <div class="radio-item">
                    <div class="code"> {{ sitem.label }}</div>
                    <img :src="sitem.imgUrl" v-if="sitem.imgUrl"/>
                  </div>
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="radioList" v-if="item.type==`oneFill`">
              <div class="title-com">{{ index }}{{ item.title }} <span v-if="item.queType==0" style="color: red; margin-left: 10px">*</span></div>
              <el-input type="text" :placeholder="item.placeholder" v-model="item.radioValue" maxlength="50" show-word-limit>
              </el-input>
            </div>
            <div class="radioList" v-if="item.type==`multiLineFill`">
              <div class="title-com">{{ index }}{{ item.title }} <span v-if="item.queType==0" style="color: red; margin-left: 10px">*</span></div>
              <el-input type="textarea" :placeholder="item.placeholder" v-model="item.radioValue" maxlength="150" show-word-limit rows="4">
              </el-input>
            </div>
            <div class="radioList" v-if="item.type==`ImageUpload`">
              <div class="title-com">{{ index }}{{ item.title }} <span v-if="item.queType==0" style="color: red; margin-left: 10px">*</span></div>
              <ImageUpload :limit='5' v-model="item.radioValue" type='small' :isShowTip='false'/>
            </div>
            <div class="radioList" v-if="item.type==`enterprise`">
              <div class="title-com">{{ index }}{{ item.title }} <span v-if="item.queType==0" style="color: red; margin-left: 10px">*</span></div>
              <el-input type="text" :placeholder="item.placeholder" v-model="item.radioValue" maxlength="20" show-word-limit>
              </el-input>
            </div>
            <div class="radioList" v-if="item.type==`address`">
              <div class="title-com">{{ index }}{{ item.title }} <span v-if="item.queType==0" style="color: red; margin-left: 10px">*</span></div>
              <el-cascader v-model="item.radioValue" :options="areaOptions" @change="handleChange" style="width: 100%;"></el-cascader>
              <el-input type="textarea" placeholder="请输入具体地址" v-model="item.address" maxlength="150" show-word-limit rows="4" class="address">
              </el-input>
            </div>
            <div class="radioList" v-if="item.type==`name`">
              <div class="title-com">{{ index }}{{ item.title }} <span v-if="item.queType==0" style="color: red; margin-left: 10px">*</span></div>
              <el-input type="text" :placeholder="item.placeholder" v-model="item.radioValue"></el-input>
            </div>
            <div class="radioList" v-if="item.type==`weChatAccount`">
              <div class="title-com">{{ index }}{{ item.title }} <span v-if="item.queType==0" style="color: red; margin-left: 10px">*</span></div>
              <el-input type="text" :placeholder="item.placeholder" v-model="item.radioValue" maxlength="30" show-word-limit>
              </el-input>
            </div>
            <div class="radioList" v-if="item.type=='duties'">
              <div class="title-com">{{ index }}{{ item.title }} <span v-if="item.queType==0" style="color: red; margin-left: 10px">*</span></div>
              <el-input type="text" :placeholder="item.placeholder" v-model="item.radioValue" maxlength="30" show-word-limit>
              </el-input>
            </div>
            <div class="radioList" v-if="item.type==`sex`">
              <div class="title-com">{{ index }} {{ item.title }} <span v-if="item.queType==0" style="color: red; margin-left: 10px">*</span></div>
              <el-radio-group v-model="item.radioValue">
                <el-radio :label="sitem.value" v-for="(sitem,sindex) in item.options">
                  <div class="radio-item">
                    <div class="code"> {{ sitem.label }}</div>
                  </div>
                </el-radio>
              </el-radio-group>
            </div>
            <div class="radioList" v-if="item.type==`mobile`">
              <div class="title-com">{{ index }}  {{ item.title }} <span v-if="item.queType==0" style="color: red; margin-left: 10px">*</span></div>
              <el-input type="text" :placeholder="item.placeholder" v-model="item.radioValue" maxlength="11" show-word-limit>
              </el-input>
            </div>
            <div class="radioList" v-if="item.type==`birthday`">
              <div class="title-com">{{ index }}  {{ item.title }} <span v-if="item.queType==0" style="color: red; margin-left: 10px">*</span></div>
              <el-date-picker style="width: 100%" v-model="item.radioValue" value-format="yyyy-MM-dd" type="date" range-separator="-" size="small" start-placeholder="开始时间" end-placeholder="结束时间"
              ></el-date-picker>
            </div>
            <div class="radioList" v-if="item.type==`text`">
              <div style="line-height: 25px; font-size: 14px;">{{ item.radioValue }}</div>
            </div>
            <template v-if="item.type==`showImg`">
              <div class="showImg" :class="item.active==0?`left`:item.active==1?`center`:`right`">
                <img src="@/assets/images/default.png" v-if="!item.imgUrl"/>
                <img :src="item.imgUrl" v-if="item.imgUrl">
              </div>
            </template>

            <div class="radioList" v-if="item.type==`bottom`">
              <el-button type="primary" style="width: 100%">{{item.btnName}}</el-button>
            </div>

            <!--          操作按钮-->
            <template v-if="index==itemActive">
              <div class="operate-top" v-if="item.type !==`head` && item.type !==`bottom`">
                <div class="icon-li-top">
                  <img src="@/assets/images/move.png" class="move"/>
                  <img src="@/assets/images/t-ding.png" @click.stop="getDing(index)" v-if="index !=1"/>
                  <img src="@/assets/images/q-top.png" @click.stop="getTop(index)" v-if="index !=1"/>
                  <img src="@/assets/images/t-di.png" @click.stop="getDi(index)" v-if="questionList.length-2>index"/>
                  <img src="@/assets/images/q-bottom.png" @click.stop="getBottom(index)" v-if="questionList.length-2>index"/>
                </div>
              </div>
              <div class="operate-bottom" v-if="item.type !==`head` && item.type !==`bottom`">
                <div class="icon-li-top">
                  <img src="@/assets/images/t-del.png" @click.stop="getDel(index)"/>
                  <img src="@/assets/images/q-copy.png" @click.stop="getCopy(index)"/>
                </div>
              </div>
            </template>

          </div>
        </draggable>

      </div>
      <div class="content-right">
        <template v-if="form.type=='head'">
          <div class="right-title">头部设置</div>
          <el-form label-position="top" label-width="80px" size="small">
            <el-form-item label="头图设置" class="switch-item">
              <el-switch class="switchSet" v-model="form.headImg"></el-switch>
            </el-form-item>
            <el-form-item label="上传图片">
              <ImageUpload :limit='1' v-model="form.imgUrl" type='small' :isShowTip='false'/>
              <div style="color: #888">建议图片尺寸为16:9，大小不超过10MB</div>
            </el-form-item>
            <el-form-item label="问卷标题">
              <el-input size="small" v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="问卷说明">
              <el-input size="small" type="" v-model="form.tips"></el-input>
            </el-form-item>
          </el-form>
        </template>
        <template v-if="form.type=='radio'">
          <div class="right-title">单选设置</div>
          <el-form label-position="top" label-width="80px">
            <el-form-item label="单选标题">
              <el-input size="small" v-model="form.title" maxlength="50" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="智能填充" class="contentColor">
              <el-radio-group v-model="form.isLabel">
                <el-radio :label="item.value" v-for="(item,index) in hasLabel">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="内容选项">
              <ul class="select-list">
                <li v-for="(item,index) in form.options">
                  <div class="flex">
                    <div class="move"><img src="../../../assets/images/move.png"></div>
                    <div class="upload">
                      <ImageUpload v-model="item.imgUrl" :limit='1' type='small' :isShowTip='false'/>
                    </div>
                    <el-input type="text" size="small" v-model="item.label" placeholder="请输入内容" maxlength="50" show-word-limit></el-input>
                    <i class="el-icon-delete" style="cursor: pointer" @click="delRadio(index)"></i>
                  </div>

                  <!--                 选择标签-->
                  <div class="label-big" v-if="form.isLabel==1">
                    <MultipleSelect size="small" v-model="item.labelList" placeholder='企微标签' :receiverNameOpt='labelOpt'/>
                  </div>
                  <!--                 选择填入描述-->
                  <div class="fillIn" v-if="form.isLabel==2">
                    <el-radio-group class="fillInRadio" v-model="item.fullIn">
                      <el-radio :label="item.value" v-for="(item,index) in fillInList">{{ item.label }}</el-radio>
                    </el-radio-group>
                  </div>
                </li>
              </ul>
              <div class="group-btn">
                <el-button size="small" plain @click="addRadio(1)"><i class="el-icon-plus"></i>添加选项</el-button>
                <el-button size="small" plain @click="addRadio(2)"><i class="el-icon-plus"></i>添加其他</el-button>
              </div>

            </el-form-item>
            <el-form-item label="题型" class="contentColor">
              <el-radio-group v-model="form.queType">
                <el-radio :label="item.value" v-for="(item,index) in isNeedList">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </template>
        <!--        下拉单选-->
        <template v-if="form.type=='SelectRadio'">
          <div class="right-title">下拉单选设置</div>
          <el-form label-position="top" label-width="80px">
            <el-form-item label="下拉单选标题">
              <el-input size="small" v-model="form.title" maxlength="50" show-word-limit></el-input>
            </el-form-item>

            <el-form-item label="框内默认文案">
              <el-input size="small" v-model="form.placeholder"></el-input>
            </el-form-item>
            <el-form-item label="智能填充" class="contentColor">
              <el-radio-group v-model="form.isLabel">
                <el-radio :label="item.value" v-for="(item,index) in hasLabel">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="内容选项">
              <ul class="select-list">
                <li v-for="(item,index) in form.options">
                  <div class="flex">
                    <div class="move"><img src="../../../assets/images/move.png"></div>
                    <div class="upload">
                      <ImageUpload v-model="item.imgUrl" :limit='1' type='small' :isShowTip='false'/>
                    </div>
                    <el-input type="text" size="small" v-model="item.label" placeholder="请输入内容" maxlength="50" show-word-limit></el-input>
                    <i class="el-icon-delete" style="cursor: pointer" @click="delRadio(index)"></i>
                  </div>

                  <!--                 选择标签-->
                  <div class="label-big" v-if="form.isLabel==1">
                    <MultipleSelect size="small" v-model="item.labelList" placeholder='企微标签' :receiverNameOpt='labelOpt'/>
                  </div>
                  <!--                 选择填入描述-->
                  <div class="fillIn" v-if="form.isLabel==2">
                    <el-radio-group class="fillInRadio" v-model="item.fullIn">
                      <el-radio :label="item.value" v-for="(item,index) in fillInList">{{ item.label }}</el-radio>
                    </el-radio-group>
                  </div>
                </li>
              </ul>
              <div class="group-btn">
                <el-button size="small" plain @click="addRadio(1)"><i class="el-icon-plus"></i>添加选项</el-button>
                <el-button size="small" plain @click="addRadio(2)"><i class="el-icon-plus"></i>添加其他</el-button>
              </div>

            </el-form-item>
            <el-form-item label="题型" class="contentColor">
              <el-radio-group v-model="form.queType">
                <el-radio :label="item.value" v-for="(item,index) in isNeedList">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </template>
        <template v-if="form.type=='checkbox'">
          <div class="right-title">多选设置</div>
          <el-form label-position="top" label-width="80px">
            <el-form-item label="多选标题">
              <el-input size="small" v-model="form.title" maxlength="50" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="智能填充" class="contentColor">
              <el-radio-group v-model="form.isLabel">
                <el-radio :label="item.value" v-for="(item,index) in hasLabel">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="内容选项">
              <ul class="select-list">
                <li v-for="(item,index) in form.options">
                  <div class="flex">
                    <div class="move"><img src="../../../assets/images/move.png"></div>
                    <div class="upload">
                      <ImageUpload v-model="item.imgUrl" :limit='1' type='small' :isShowTip='false'/>
                    </div>
                    <el-input type="text" size="small" v-model="item.label" placeholder="请输入内容" maxlength="50" show-word-limit></el-input>
                    <i class="el-icon-delete" style="cursor: pointer" @click="delRadio(index)"></i>
                  </div>

                  <!--                 选择标签-->
                  <div class="label-big" v-if="form.isLabel==1">
                    <MultipleSelect size="small" v-model="item.labelList" placeholder='企微标签' :receiverNameOpt='labelOpt'/>
                  </div>
                  <!--                 选择填入描述-->
                  <div class="fillIn" v-if="form.isLabel==2">
                    <el-radio-group class="fillInRadio" v-model="item.fullIn">
                      <el-radio :label="item.value" v-for="(item,index) in fillInList">{{ item.label }}</el-radio>
                    </el-radio-group>
                  </div>
                </li>
              </ul>
              <div class="group-btn">
                <el-button size="small" plain @click="addRadio(1)"><i class="el-icon-plus"></i>添加选项</el-button>
                <el-button size="small" plain @click="addRadio(2)"><i class="el-icon-plus"></i>添加其他</el-button>
              </div>

            </el-form-item>
            <el-form-item label="题型" class="contentColor">
              <el-radio-group v-model="form.queType">
                <el-radio :label="item.value" v-for="(item,index) in isNeedList">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </template>
        <template v-if="form.type=='oneFill'">
          <div class="right-title">单行填空设置</div>
          <el-form label-position="top" label-width="80px">
            <el-form-item label="单行文本标题">
              <el-input size="small" v-model="form.title" maxlength="50" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="框内默认文案">
              <el-input size="small" v-model="form.placeholder" maxlength="50" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="智能填充" class="contentColor">
              <el-radio-group v-model="form.isLabel">
                <el-radio :label="item.value" v-for="(item,index) in hasLabel">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="题型" class="contentColor">
              <el-radio-group v-model="form.queType">
                <el-radio :label="item.value" v-for="(item,index) in isNeedList">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </template>
        <template v-if="form.type=='multiLineFill'">
          <div class="right-title">多行填空设置</div>
          <el-form label-position="top" label-width="80px">
            <el-form-item label="多行文本标题">
              <el-input size="small" v-model="form.title" maxlength="50" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="框内默认文案">
              <el-input size="small" v-model="form.placeholder" maxlength="50" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="智能填充" class="contentColor">
              <el-radio-group v-model="form.isLabel">
                <el-radio :label="item.value" v-for="(item,index) in hasLabel">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="题型" class="contentColor">
              <el-radio-group v-model="form.queType">
                <el-radio :label="item.value" v-for="(item,index) in isNeedList">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </template>
        <template v-if="form.type=='ImageUpload'">
          <div class="right-title">多行填空设置</div>
          <el-form label-position="top" label-width="80px">
            <el-form-item label="多行文本标题">
              <el-input size="small" v-model="form.title" maxlength="50" show-word-limit></el-input>
            </el-form-item>
            <el-form-item>
              <div style="font-size: 14px;">最多上传5张图片，每张不超过10MB</div>
            </el-form-item>
            <el-form-item label="题型" class="contentColor">
              <el-radio-group v-model="form.queType">
                <el-radio :label="item.value" v-for="(item,index) in isNeedList">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </template>
        <template v-if="form.type=='enterprise'">
          <div class="right-title">企业设置</div>
          <el-form label-position="top" label-width="80px">
            <el-form-item label="标题">
              <el-input size="small" v-model="form.title" maxlength="20" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="框内默认文案">
              <el-input size="small" v-model="form.placeholder" maxlength="20" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="智能填充" class="contentColor">
              <el-radio-group v-model="form.isLabel">
                <el-radio :label="item.value" v-for="(item,index) in hasEnterprise">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="题型" class="contentColor">
              <el-radio-group v-model="form.queType">
                <el-radio :label="item.value" v-for="(item,index) in isNeedList">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </template>
        <template v-if="form.type=='address'">
          <div class="right-title">地址设置</div>
          <el-form label-position="top" label-width="80px">
            <el-form-item label="标题">
              <el-input size="small" v-model="form.title" maxlength="20" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="智能填充" class="contentColor">
              <el-radio-group v-model="form.addRessList">
                <el-radio :label="item.value" v-for="(item,index) in addRessList">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="题型" class="contentColor">
              <el-radio-group v-model="form.queType">
                <el-radio :label="item.value" v-for="(item,index) in isNeedList">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </template>
        <template v-if="form.type=='name'">
          <div class="right-title">姓名设置</div>
          <el-form label-position="top" label-width="80px">
            <el-form-item label="标题">
              <el-input size="small" v-model="form.title" maxlength="20" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="框内默认文案">
              <el-input size="small" v-model="form.placeholder" maxlength="20" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="智能填充" class="contentColor">
              <el-radio-group v-model="form.isLabel">
                <el-radio :label="item.value" v-for="(item,index) in nameList">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item v-show="form.isLabel==2">
              <div class="editor-big">
                <ul class="tags">
                  <li v-for="(item,index) in tagsList" @click="getHtml(item)">{{ item }}</li>
                </ul>
                <div id="editor2" style="height: 100px"></div>
              </div>

            </el-form-item>
            <el-form-item label="题型" class="contentColor">
              <el-radio-group v-model="form.queType">
                <el-radio :label="item.value" v-for="(item,index) in isNeedList">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </template>
        <template v-if="form.type=='weChatAccount'">
          <div class="right-title">微信号设置</div>
          <el-form label-position="top" label-width="80px">
            <el-form-item label="标题">
              <el-input size="small" v-model="form.title" maxlength="20" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="框内默认文案">
              <el-input size="small" v-model="form.placeholder" maxlength="20" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="智能填充" class="contentColor">
              <el-radio-group v-model="form.isLabel">
                <el-radio :label="item.value" v-for="(item,index) in weChatAccountList">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="题型" class="contentColor">
              <el-radio-group v-model="form.queType">
                <el-radio :label="item.value" v-for="(item,index) in isNeedList">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </template>
        <template v-if="form.type=='duties'">
          <div class="right-title">职务设置</div>
          <el-form label-position="top" label-width="80px">
            <el-form-item label="标题">
              <el-input size="small" v-model="form.title" maxlength="20" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="框内默认文案">
              <el-input size="small" v-model="form.placeholder" maxlength="20" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="智能填充" class="contentColor">
              <el-radio-group v-model="form.isLabel">
                <el-radio :label="item.value" v-for="(item,index) in weChatAccountList">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="题型" class="contentColor">
              <el-radio-group v-model="form.queType">
                <el-radio :label="item.value" v-for="(item,index) in isNeedList">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </template>
        <template v-if="form.type=='sex'">
          <div class="right-title">性别设置</div>
          <el-form label-position="top" label-width="80px">
            <el-form-item label="单选标题">
              <el-input size="small" v-model="form.title" maxlength="50" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="智能填充" class="contentColor">
              <el-radio-group v-model="form.isLabel">
                <el-radio :label="item.value" v-for="(item,index) in hasLabel">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="内容选项">
              <ul class="select-list">
                <li v-for="(item,index) in form.options">
                  <div class="flex">
                    <div class="move"><img src="../../../assets/images/move.png"></div>
                    <el-input type="text" size="small" v-model="item.label" placeholder="请输入内容" disabled maxlength="50" show-word-limit style="margin-left: 10px;"></el-input>

                  </div>

                  <!--                 选择标签-->
                  <div class="label-big" v-if="form.isLabel==1">
                    <MultipleSelect size="small" v-model="item.labelList" placeholder='企微标签' :receiverNameOpt='labelOpt'/>
                  </div>
                  <!--                 选择填入描述-->
                  <div class="fillIn" v-if="form.isLabel==2">
                    <el-radio-group class="fillInRadio" v-model="item.fullIn">
                      <el-radio :label="item.value" v-for="(item,index) in fillInList">{{ item.label }}</el-radio>
                    </el-radio-group>
                  </div>
                </li>
              </ul>
              <div class="group-btn">
                <el-button size="small" plain @click="addRadio(1)"><i class="el-icon-plus"></i>添加选项</el-button>
                <el-button size="small" plain @click="addRadio(2)"><i class="el-icon-plus"></i>添加其他</el-button>
              </div>

            </el-form-item>
            <el-form-item label="题型" class="contentColor">
              <el-radio-group v-model="form.queType">
                <el-radio :label="item.value" v-for="(item,index) in isNeedList">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </template>
        <template v-if="form.type=='mobile'">
          <div class="right-title">姓名设置</div>
          <el-form label-position="top" label-width="80px">
            <el-form-item label="标题">
              <el-input size="small" v-model="form.title" maxlength="20" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="框内默认文案">
              <el-input size="small" v-model="form.placeholder" maxlength="20" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="智能填充" class="contentColor">
              <el-radio-group v-model="form.isLabel">
                <el-radio :label="item.value" v-for="(item,index) in mobileList">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item v-show="form.isLabel==2">
              <div class="editor-big">
                <ul class="tags">
                  <li v-for="(item,index) in tagsList" @click="getHtml(item)">{{ item }}</li>
                </ul>
                <div id="editor2" style="height: 100px"></div>
              </div>

            </el-form-item>
            <el-form-item label="题型" class="contentColor">
              <el-radio-group v-model="form.queType">
                <el-radio :label="item.value" v-for="(item,index) in isNeedList">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </template>
        <template v-if="form.type=='birthday'">
          <div class="right-title">生日设置</div>
          <el-form label-position="top" label-width="80px">
            <el-form-item label="标题">
              <el-input size="small" v-model="form.title" maxlength="20" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="智能填充" class="contentColor">
              <el-radio-group v-model="form.isLabel">
                <el-radio :label="item.value" v-for="(item,index) in weChatAccountList">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="题型" class="contentColor">
              <el-radio-group v-model="form.queType">
                <el-radio :label="item.value" v-for="(item,index) in isNeedList">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </template>
        <template v-if="form.type=='text'">
          <el-form label-position="top" label-width="80px">
            <el-form-item label="文本内容">
              <el-input size="small" type="textarea" rows="4" v-model="form.radioValue" maxlength="20" show-word-limit></el-input>
            </el-form-item>
          </el-form>
        </template>
        <template v-if="form.type=='showImg'">
          <div class="right-title">图片展示设置</div>
          <el-form label-position="top" label-width="80px" size="small">
            <el-form-item label="上传图片">
              <ImageUpload :limit='1' v-model="form.imgUrl" type='small' :isShowTip='false'/>
              <div style="color: #888">建议图片尺寸为16:9，大小不超过10MB</div>
            </el-form-item>
            <el-form-item label="图片对齐">
              <ul class="alignList">
                <li :class="form.active==0?`active`:``" @click="getActive(0)"><img src="@/assets/images/left-active.png" v-if="active==0"/><img src="@/assets/images/left.png" v-else/>左对齐</li>
                <li :class="form.active==1?`active`:``" @click="getActive(1)"><img src="@/assets/images/center-active.png" v-if="active==1"/><img src="@/assets/images/center.png" v-else/>水平对齐</li>
                <li :class="form.active==2?`active`:``" @click="getActive(2)"><img src="@/assets/images/right-active.png" v-if="active==2"/> <img src="@/assets/images/right.png" v-else/>右对齐</li>
              </ul>
            </el-form-item>
          </el-form>
        </template>
        <template v-if="form.type=='bottom'">
          <div class="right-title">提交按钮设置</div>
          <el-form label-position="top" label-width="80px" size="small">
            <el-form-item label="按钮名称">
              <el-input size="small" v-model="form.btnName" maxlength="8" show-word-limit></el-input>
            </el-form-item>
          </el-form>
        </template>
      </div>
    </div>

  </div>
</template>

<script>
import MultipleSelect from "@/views/components/multipleSelect.vue";
import item from "@/layout/components/Sidebar/Item.vue";
// 引入样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import {quillEditor, Quill} from 'vue-quill-editor';
import quillEmoji from 'quill-emoji'
import 'quill-emoji/dist/quill-emoji.css'

Quill.register('modules/quillEmoji', quillEmoji);
import '@/utils/customQuill.js'
import draggable from 'vuedraggable';

export default {
  name: 'addOrEditInQuestion',
  components: {
    draggable,
    MultipleSelect,
    quillEditor,
  },
  data() {
    return {
      quill: null,
      options: {
        theme: "snow",
        bounds: document.body,
        debug: "warn",
        modules: {
          'emoji-toolbar': true,
          'emoji-shortname': true,
          // 工具栏配置
          toolbar: [
            //  ["bold", "italic", "underline", "strike"],       // 加粗 斜体 下划线 删除线
            //   ["blockquote", "code-block"],                    // 引用  代码块
            //  [{ list: "ordered" }, { list: "bullet" }],       // 有序、无序列表
            //  [{ indent: "-1" }, { indent: "+1" }],            // 缩进
            //   [{ size: ["small", false, "large", "huge"] }],   // 字体大小
            //  [{ header: [1, 2, 3, 4, 5, 6, false] }],         // 标题
            //  [{ color: [] }, { background: [] }],             // 字体颜色、字体背景颜色
            //  [{ align: [] }],                                 // 对齐方式
            //  ["clean"],                                       // 清除文本格式
            // ["link", "image", "video"],                       // 链接、图片、视频
            //['emoji'],//表情包
          ],
        },
        placeholder: "请输入内容",
        readOnly: this.readOnly,
      },
      tagsList: ['填充内容', '原备注', '微信昵称'],
      form: {},//变量
      active: 1,
      itemActive: 0,
      hasLabel: [
        {value: 0, label: '无',},
        {value: 1, label: '标签',},
        {value: 2, label: '描述',}
      ],
      mobileList: [
        {value: 0, label: '无',},
        {value: 1, label: '电话',},
        {value: 2, label: '描述',},
        {value: 3, label: '备注',}
      ],
      weChatAccountList: [
        {value: 0, label: '无',},
        {value: 1, label: '描述',}
      ],
      sexList: [
        {value: 0, label: '男',},
        {value: 1, label: '女',}
      ],
      hasEnterprise: [
        {value: 0, label: '无',},
        {value: 1, label: '企业',},
        {value: 2, label: '描述',}
      ],
      nameList: [
        {value: 0, label: '无',},
        {value: 1, label: '描述',},
        {value: 2, label: '备注',}
      ],
      addRessList: [
        {value: 0, label: '无',},
        {value: 1, label: '描述',},
      ],
      isNeedList: [
        {value: 0, label: '必填',},
        {value: 1, label: '选填',},
      ],
      fillInList: [
        {value: 0, label: '填入描述',},
        {value: 1, label: '不填入',},
      ],
      areaOptions: [
        {
          label: '北京',
          value: 'beijing',
          children: [
            {label: '东城区', value: 'dongcheng'},
            {label: '朝阳区', value: 'chaoyang'},
            // ... 其他区域
          ]
        },
        {
          label: '上海',
          value: 'shanghai',
          children: [
            {label: '浦东新区', value: 'putuo'},
            {label: '浦北新区', value: 'baoshan'},
            // ... 其他区域
          ]
        },
        // ... 其他城市
      ],
      type: 'radio',//类型
      questionType: [
        {
          groupType: '选择题',
          groupList: [
            {type: 'radio', name: '单选', icon: require('@/assets/images/address.png')},
            {type: 'SelectRadio', name: '下拉单选', icon: require('@/assets/images/SelectRadio.png')},
            {type: 'checkbox', name: '多选', icon: require('@/assets/images/checkbox.png')},
          ],
        },
        {
          groupType: '填空题',
          groupList: [
            {type: 'oneFill', name: '单行填写', icon: require('@/assets/images/oneFill.png')},
            {type: 'multiLineFill', name: '多行填写', icon: require('@/assets/images/multiLineFill.png')},
            {type: 'ImageUpload', name: '图片上传', icon: require('@/assets/images/ImageUpload.png')},
          ],

        },
        {
          groupType: '基本信息',
          groupList: [
            {type: 'enterprise', name: '企业', icon: require('@/assets/images/enterprise.png')},
            {type: 'address', name: '地址', icon: require('@/assets/images/address.png')},
            {type: 'name', name: '姓名', icon: require('@/assets/images/name.png')},
            {type: 'weChatAccount', name: '微信号', icon: require('@/assets/images/weChatAccount.png')},
            {type: 'duties', name: '职务', icon: require('@/assets/images/duties.png')},
            {type: 'sex', name: '性别', icon: require('@/assets/images/sex.png')},
            {type: 'mobile', name: '电话', icon: require('@/assets/images/mobile.png')},
            {type: 'birthday', name: '生日', icon: require('@/assets/images/birthday.png')},
          ],

        },
        {
          groupType: '展示信息',
          groupList: [
            {type: 'text', name: '文本', icon: require('@/assets/images/text.png')},
            {type: 'showImg', name: '图片', icon: require('@/assets/images/ImageUpload.png')},
          ],

        }
      ],
      labelOpt: [
        {
          value: 1, label: '客户等级', children: [
            {value: 3, label: '核心',},
            {value: 4, label: '重要',},
            {value: 5, label: '一般',}
          ]
        },
        {
          value: 2, label: '客户等级2', children: [
            {value: 6, label: '可爱',},
            {value: 7, label: '知性',},
            {value: 8, label: '性感',}
          ]
        }
      ],
      questionList: [
        {
          type: 'head',//类型
          headImg: true,//是否开启图片
          imgUrl: '',
          title: '问卷说明',
          tips: '问卷说明',
        },
        {
          type: 'bottom',//类型
          btnName:'提交',//名称
        },
      ],

      rules: {
        'name': [
          {required: true, message: '请输入标签名称', trigger: 'blur'}
        ],

      },
    }
  },
  created() {
    this.form = this.questionList[0];
  },
  mounted() {

  },
  watch: {
    'form.type'(val) {
      if (val == 'name' || val == 'mobile') {
        this.$nextTick(() => {
          this.quill = new Quill('#editor2', this.options);
          // 注册键盘事件
        })
      }
    },
    'itemActive'(val){
      console.log('选择的index',val);
    }
  },
  methods: {
    getHtml(html) {
      this.quill.focus();
      var range = this.quill.getSelection();
      if (range) {
        if (range.length == 0) {
          console.log('User cursor is at index', range.index);
          this.quill.insertEmbed(this.quill.getSelection().index || 0, 'AppPanelEmbed', `<span class="htmlTags">${html}</span>`);
          // 调整光标到最后
          this.quill.setSelection(range.index + 1);
        }
      } else {
        console.log('User cursor is not in editor');
      }
    },
    getActive(index) {
      this.form.active = index;

    },
    getShow(index) {
      this.itemActive = index;
      this.$set(this, 'form', this.questionList[index]);
    },

    delRadio(index) {
      this.form.options.splice(index, 1);
    },
    addRadio(num) {
      let index = this.form.options.length;
      if (num == 1) {
        //增加选项
        let obj = {
          imgUrl: '',
          value: index + 1,
          label: `选项${index + 1}`,
          labelList: [],
          fullIn: '填入描述'
        }
        this.form.options.push(obj);
      } else {
        //其他
        let obj = {
          imgUrl: '',
          value: index + 1,
          label: `其他`,
          labelList: [],
          fullIn: '填入描述'
        }
        this.form.options.push(obj);
      }
    },
    changeType(index, type) {
      let obj={};
      if (type == 'radio') {
        //单选
         obj = {
          type: 'radio',//类型
          title: '单选标题',
          isLabel: 0,//是否智能填充
          radioValue: null,//单选值
          queType: 0,
          options: [
            {
              imgUrl: '',
              value: 1,
              label: '选项1',
              labelList: [],
              fullIn: '填入描述'
            },
            {
              imgUrl: '',
              value: 2,
              label: '选项2',
              labelList: [],
              fullIn: '填入描述'
            },
            {
              imgUrl: '',
              value: 3,
              label: '选项3',
              labelList: [],
              fullIn: '填入描述'
            },
          ],
        }
      }
      if (type == 'SelectRadio') {
        //下拉单选
         obj = {
          type: 'SelectRadio',//类型
          title: '下拉单选标题',
          isLabel: 0,//是否智能填充
          placeholder: '请选择',
          radioValue: null,//单选值
          queType: 0,
          options: [
            {
              value: 1,
              label: '选项1',
              labelList: [],
              fullIn: '填入描述'
            },
            {
              value: 2,
              label: '选项2',
              labelList: [],
              fullIn: '填入描述'
            },
            {
              value: 3,
              label: '选项3',
              labelList: [],
              fullIn: '填入描述'
            },
          ],
        }

      }
      if (type == 'checkbox') {
        //多选
        obj = {
          type: 'checkbox',//类型
          title: '多选标题',
          isLabel: 0,//是否智能填充
          checkboxValue: [],//单选值
          queType: 0,
          options: [
            {
              imgUrl: '',
              value: 1,
              label: '选项1',
              labelList: [],
              fullIn: '填入描述'
            },
            {
              imgUrl: '',
              value: 2,
              label: '选项2',
              labelList: [],
              fullIn: '填入描述'
            },
            {
              imgUrl: '',
              value: 3,
              label: '选项3',
              labelList: [],
              fullIn: '填入描述'
            },
          ],
        }
      }
      if (type == 'oneFill') {
        //单行填空
         obj = {
          type: 'oneFill',//类型
          title: '单行文字文本',
          radioValue: null,//值
          placeholder: '请输入',
          isLabel: 0,//是否智能填充
          queType: 0,
        }
      }
      if (type == 'multiLineFill') {
        //单行填空
         obj = {
          type: 'multiLineFill',//类型
          title: '多行文字标题',
          radioValue: null,//值
          placeholder: '请输入',
          isLabel: 0,//是否智能填充
          queType: 0,
        }
      }
      if (type == 'ImageUpload') {
        //单行填空
         obj = {
          type: 'ImageUpload',//类型
          title: '图片标题上传',
          radioValue: [],//值
          placeholder: '请输入',
          queType: 0,
        }
      }
      if (type == 'enterprise') {
        //企业
         obj = {
          type: 'enterprise',//类型
          title: '请填写你的企业',
          radioValue: [],//值
          placeholder: '请输入',
          queType: 0,
        }
      }
      if (type == 'address') {
        //地址
         obj = {
          type: 'address',//类型
          title: '请填写您的地址',
          radioValue: [],//值
          address: '',
          placeholder: '请输入',
          isLabel: 0,
          queType: 0,
        }
      }
      if (type == 'name') {
        //地址
         obj = {
          type: 'name',//类型
          title: '请填写您的姓名',
          radioValue: null,//值
          placeholder: '请输入',
          isLabel: 0,
          queType: 0,
        }
      }
      if (type == 'weChatAccount') {
        //单行填空
         obj = {
          type: 'weChatAccount',//类型
          title: '请填写你的微信号',
          radioValue: null,//值
          placeholder: '请输入',
          isLabel: 0,//是否智能填充
          queType: 0,
        }
      }
      if (type == 'duties') {
        //单行填空
         obj = {
          type: 'duties',//类型
          title: '请填写你的职务',
          radioValue: null,//值
          placeholder: '请输入',
          isLabel: 0,//是否智能填充
          queType: 0,
        }
      }
      if (type == 'sex') {
        //单选
         obj = {
          type: 'sex',//类型
          title: '请选择您的性别',
          isLabel: 0,//是否智能填充
          radioValue: null,//单选值
          queType: 0,
          options: [
            {
              imgUrl: '',
              value: 1,
              label: '男',
              labelList: [],
              fullIn: '填入描述'
            },
            {
              imgUrl: '',
              value: 2,
              label: '女',
              labelList: [],
              fullIn: '填入描述'
            },
          ],
        }
      }
      if (type == 'mobile') {
        //电话
        obj = {
          type: 'mobile',//类型
          title: '请填写您的电话',
          radioValue: null,//值
          placeholder: '请输入',
          isLabel: 0,
          queType: 0,
        }
      }
      if (type == 'birthday') {
        //电话
         obj = {
          type: 'birthday',//类型
          title: '请选择您的生日',
          radioValue: null,//值
          isLabel: 0,
          queType: 0,
        }
      }
      if (type == 'text') {
        //电话
         obj = {
          type: 'text',//类型
          radioValue: '这是一条文本内容',//值
        }
      }
      if (type == 'showImg') {
        //展示图片
         obj = {
          type: 'showImg',//类型
          imgUrl: '',
           active:1,
        }
      }
      this.questionList.splice(this.questionList.length-1,0,obj);//单选
      this.form = {};
      this.$set(this, 'form', obj);
      this.itemActive= this.questionList.length-2;
      this.type = type;
      console.log('form的值', this.form);

    },
    onSubmit(formName) {
      //提交的代码
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('提交表单');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    gotoPage() {
      this.$router.push({
        path: '/customerOperationsMgt/inQuestionMgt/inQuestionList',
      })
    },
    handleChange(value) {
      console.log(value);
    },
    getTop(index) {
      //上移
      const temp = this.questionList[index];
      this.$set(this.questionList, index, this.questionList[index - 1]);
      this.$set(this.questionList, index - 1, temp);
      this.itemActive = index - 1;
      this.form = this.questionList[index - 1];
    },
    getBottom(index) {
      //下移
      const temp = this.questionList[index];
      this.$set(this.questionList, index, this.questionList[index + 1]);
      this.$set(this.questionList, index + 1, temp);
      this.itemActive = index + 1;
      this.form = this.questionList[index + 1];
    },
    getDing(index) {
      //置顶
      let temp = JSON.parse(JSON.stringify(this.questionList[index]));
      this.questionList.splice(index, 1);
      this.questionList.splice(1, 0, temp);
      this.itemActive = 1;
      this.form = this.questionList[1];
    },
    getDi(index) {
      //置底
      let temp = JSON.parse(JSON.stringify(this.questionList[index]));
      this.questionList.splice(index, 1);
      this.questionList.splice(this.questionList.length - 1, 0, temp);
      this.itemActive = this.questionList.length - 2;
      this.form = this.questionList[this.questionList.length - 2];
    },
    getCopy(index){
      //复制
      let temp = JSON.parse(JSON.stringify(this.questionList[index]));
      this.itemActive = index+1;
      this.questionList.splice(index+1, 0, temp);
      this.form = this.questionList[index+1];
    },
    getDel(index){
      this.questionList.splice(index, 1);
      this.itemActive = index-1;
      this.form = this.questionList[index-1];
    },
    onEnd(event){
      console.log('拖拽结束');
      this.itemActive = event.newIndex;
      this.form = this.questionList[event.newIndex];
    },
  }
}
</script>

<style scoped lang="scss">
.header-top {
  height: 46px;
  background: #fff;
  border-bottom: 1px solid #e9e9e9;
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 20px;

  .head-title {
    font-size: 14px;
    line-height: 22px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    .backIcon {
      display: flex;
      align-items: center;
      padding: 0;
      margin-right: 12px;
      border: none;
      width: 24px;
      height: 24px;
      background: #4b5a95;
      border-radius: 12px;
      cursor: pointer;
      justify-content: center;
    }
    i {
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
      color: #fff;
    }
  }

}

.content-big {
  display: flex;
  position: relative;
  padding: 20px;
  height: calc(100vh - 100px);

  .content-left {
    padding: 0 16px 16px 16px;
    overflow-y: auto;
    width: 300px;
    max-height: 100%;
    background: #fff;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, .15);
    border-radius: 1px;
    height: fit-content;
  }

  .content-center {
    margin: 0 20px;
    display: flex;
    flex-direction: column;
    flex: 1 1;
    overflow-y: auto;
    border-radius: 1px;
  }

  .content-right {
    width: 420px;
    display: flex;
    flex-direction: column;
    max-height: 100%;
    min-height: 30vh;
    overflow: auto;
    background: #fff;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, .15);
    border-radius: 1px;
    height: 100%;
  }
}

.questionType {
  .questionType-title {
    font-size: 14px;
    font-weight: 500;
    color: #222333;
    margin: 15px 0;
  }

  ul {
    display: flex;
    flex-wrap: wrap;

    li {
      list-style: none;
      display: flex;
      width: calc(50% - 8px);
      height: 40px;
      margin: 0px 4px;
      margin-bottom: 8px;
      cursor: pointer;
      display: flex;
      justify-content: start;
      align-items: center;
      background-color: #fff;
      border: 1px solid #e9e9e9;
      border-radius: 2px;
      color: #666;
      font-size: 12px;

      img {
        padding: 0px 15px;
      }
    }
  }
}

.el-form {
  padding: 20px;

  ::v-deep .el-form-item {
    position: relative;
    margin-bottom: 10px;
    &.contentColor {
      .el-form-item__content {
        background: #f5f5f5;
        padding: 10px 0px;
        padding-left: 15px;
      }
    }

    .el-form-item__label {
      padding-bottom: 0px !important;
    }
  }
}

.right-title {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #e9e9e9;
  background: #fff;
  padding-left: 20px;
  font-size: 14px;
  font-weight: 500;
}

.switchSet {
  position: absolute;
  right: 0px;
  top: -40px;
}

.select-list {
  li {
    list-style: none;
    background: #f7f7f7;
    padding: 10px;
    margin-bottom: 10px;

    > .flex {
      align-items: center;
    }

    .upload {
      margin: 0px 5px;
      width: 30px;
      height: 30px;
    }

    .el-icon-delete {
      margin-left: 10px;
    }

    ::v-deep .component-upload-image {
      .small .el-upload {
        width: 30px;
        height: 30px;
        line-height: 30px;
      }
    }

    ::v-deep .el-upload--picture-card i {
      font-size: 16px;
    }

  }

}

.group-btn {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;

  .el-button {
    width: 48%;
  }
}

.fillInRadio {
  margin: 5px 0px;
  background: #fff;

  ::v-deep .el-radio__input {
    display: none;
  }

  ::v-deep .el-radio__label {
    height: 32px;
    margin: 0;
    padding: 0 15px;
    border: 1px solid #eee;
    display: flex;
    align-items: center;
  }

  ::v-deep .el-radio {
    margin-right: 0px;
  }

}

.header {
  background: #fff;

  img {
    width: 100%;
    height: auto;
  }

  .header-title {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
    font-weight: bold;
  }

  .header-tips {
    color: #999;
    font-size: 14px;
    padding: 16px;
  }
}

.radioList {
  .el-select {
    width: 100%;
  }
}

.title-com {
  border-bottom: 1px solid #eee;
  font-weight: bold;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 15px;
}

.content-item {
  background: #fff;
  padding: 16px;
  border: 2px solid #eee;
  margin-bottom: 10px;
  position: relative;

  &.active {
    border-color: #2d8cf0;
  }

  .operate-top {
    padding: 0px 10px;
    height: 20px;
    align-items: center;
    display: flex;
    position: absolute;
    left: 0px;
    top: 0px;
    background: #409eff;

    img {
      margin: 0px 5px;
      cursor: pointer;
    }
  }

  .operate-bottom {
    padding: 0px 10px;
    height: 20px;
    align-items: center;
    display: flex;
    position: absolute;
    justify-content: center;
    right: 0px;
    bottom: 0px;
    background: #409eff;

    img {
      margin: 0px 5px;
      cursor: pointer;
    }
  }
}

.el-radio-group {

}

.radioList {
  ::v-deep.el-radio-group, ::v-deep.el-checkbox-group {
    display: flex;
    width: 100%;
    flex-direction: column;

    .el-radio, .el-checkbox {
      margin-right: 0px;
      min-height: 20px;
      padding: 10px;
      display: flex;
      border: 1px solid #eee;
      align-items: center;
      margin-bottom: 10px;
      padding: 0px 10px;

      .el-radio__label {
        flex: 1;
      }

      .el-checkbox__label {
        flex: 1;
      }

    }

    .option-img {
      width: 60px;
      height: 60px;
    }

    .radio-item {
      display: flex;
      justify-content: space-between;
      padding: 10px 0px;

      .code {
        display: flex;
        align-items: center;
      }
    }
  }

}

.address {
  margin-top: 10px;

  ::v-deep .el-textarea__inner {
    border: none;
  }
}

.editor-big {
  position: relative;

}

.tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  position: absolute;
  left: 40px;
  height: 32px;

  li {
    list-style: none;
    padding: 0px;
    margin: auto;
    background: #fff;
    border: 1px solid #e9e9e9;
    padding: 3px 8px;
    cursor: pointer;
    margin: 0;
    border-radius: 2px;
    color: #666;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;

  }
}

::v-deep .embed-innerApp {
  display: inline-block;
}

::v-deep .htmlTags {
  padding: 0 8px;
  margin: 0 8px;
  text-align: center;
  height: 26px;
  line-height: 26px;
  border-radius: 2px;
  border: 1px solid rgba(47, 84, 235, .32);
  cursor: pointer;
  color: #2f54eb;
  background: rgba(47, 84, 235, .08);
  font-size: 12px;
  display: inline-block;
}

.alignList {
  display: flex;
  align-items: center;
  background: #f5f5f5;
  height: 54px;

  li {
    flex: 1;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0px 20px;

    img {
      margin-right: 10px;
    }
  }
}

.showImg {
  display: flex;

  &.left {
    justify-content: left;
  }

  &.center {
    justify-content: center;
  }

  &.right {
    justify-content: flex-end;
  }

  img {
    max-width: 100%;

  }
}

.custom-container {
  /* 添加自定义样式 */
}

/* 修改拖动时的阴影效果 */
.customList .sortable-ghost {
  box-shadow: none;
  background: #000;
}

/*定义要拖拽元素的样式*/
.ghostClass {
  background-color: blue !important;
}

.chosenClass {
  background-color: #eee !important;
  opacity: 1 !important;
}

.dragClass {
  background-color: #f7f7f7 !important;
  opacity: 1 !important;
  box-shadow: none !important;
  outline: none !important;
  background-image: none !important;
}
</style>
